<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Carousel :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">

    <link href="css/docs.css" rel="stylesheet">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/metro.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/prettify/run_prettify.js"></script>
    <script src="js/ga.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>



</head>
<body>
    <div class="container page-content">
        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Carousel</h1>

        @@adsense

        <div class="example" data-text="example">
            <div class="grid">
                <div class="row cells3">
                    <div class="cell">
                        <h5>.carousel</h5>
                        <div class="carousel" data-role="carousel" data-height="200" data-control-next="<span class='mif-chevron-right'></span>" data-control-prev="<span class='mif-chevron-left'></span>">
                            <div class="slide padding20 debug">
                                <h2>First slide</h2>
                                <p>
                                    Carousel :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style
                                </p>
                            </div>
                            <div class="slide"><img src="images/2.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/3.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/4.jpg" data-role="fitImage" data-format="fill"></div>
                        </div>
                    </div>
                    <div class="cell">
                        <h5>Without controls</h5>
                        <div class="carousel" data-role="carousel" data-height="200" data-controls="false" data-markers="false" data-effect="fade">
                            <div class="slide"><img src="images/1.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/2.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/3.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/4.jpg" data-role="fitImage" data-format="fill"></div>
                        </div>
                    </div>
                    <div class="cell">
                        <h5>.carousel & .square-markers</h5>
                        <div class="carousel square-bullets" data-height="200" data-role="carousel" data-direction="right">
                            <div class="slide"><img src="images/1.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/2.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/3.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/4.jpg" data-role="fitImage" data-format="fill"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End of example -->

        <div class="example" data-text="code">
            <h5>HTML</h5>
            <pre class="prettyprint linenums"><code>
                &lt;div class="carousel"&gt;
                    &lt;div class="slide"&gt;...&lt;/div&gt;
                    ...
                    &lt;div class="slide"&gt;...&lt;/div&gt;
                &lt;/div&gt;
            </code></pre>

            <h5>Declarative style</h5>
            <pre class="prettyprint linenums"><code>
                &lt;div class="carousel" data-role="carousel"&gt;...&lt;/div&gt;
            </code></pre>

            <h5>Javascript style</h5>
            <pre class="prettyprint linenums"><code>
                &lt;div class="carousel" id="carousel"&gt;...&lt;/div&gt;

                &lt;script&gt;
                    $(function(){
                        $("#carousel").carousel();
                    });
                &lt;/script&gt;
            </code></pre>
        </div> <!-- End of example -->

        <h3>Options</h3>
        <table class="table bordered border">
            <thead>
            <tr>
                <td>Parameter</td>
                <td>Data-*</td>
                <td>Type</td>
                <td>Default value</td>
                <td>Description</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>auto</td>
                <td style="white-space: nowrap">data-auto</td>
                <td>boolean</td>
                <td>true</td>
                <td>Auto start carousel after init</td>
            </tr>
            <tr>
                <td>period</td>
                <td style="white-space: nowrap">data-period</td>
                <td>int</td>
                <td>5000</td>
                <td>Sliding period in ms</td>
            </tr>
            <tr>
                <td>duration</td>
                <td style="white-space: nowrap">data-duration</td>
                <td>int</td>
                <td>1000</td>
                <td>Duration in ms</td>
            </tr>
            <tr>
                <td>direction</td>
                <td style="white-space: nowrap">data-direction</td>
                <td>string</td>
                <td>left</td>
                <td>Sliding direction [left, right]</td>
            </tr>
            <tr>
                <td>effect</td>
                <td style="white-space: nowrap">data-effect</td>
                <td>string</td>
                <td>slide</td>
                <td>Sliding effect [slide, fade, switch, slowdown]</td>
            </tr>
            <tr>
                <td>effectFunc</td>
                <td style="white-space: nowrap">data-effect-func</td>
                <td>string</td>
                <td>linear</td>
                <td>Effect function for effect slide</td>
            </tr>
            <tr>
                <td>controls</td>
                <td style="white-space: nowrap">data-controls</td>
                <td>boolean</td>
                <td>true</td>
                <td>Show or hide left(right) controls</td>
            </tr>
            <tr>
                <td>controlNext</td>
                <td style="white-space: nowrap">data-control-next</td>
                <td>string</td>
                <td>&gt;</td>
                <td>Html for control next</td>
            </tr>
            <tr>
                <td>controlPrev</td>
                <td style="white-space: nowrap">data-control-prev</td>
                <td>string</td>
                <td>&lt;</td>
                <td>Html for control prev</td>
            </tr>
            <tr>
                <td>markers</td>
                <td style="white-space: nowrap">data-markers</td>
                <td>boolean</td>
                <td>true</td>
                <td>Show or hide slide markers for quick access to own slide</td>
            </tr>
            <tr>
                <td>stop</td>
                <td style="white-space: nowrap">data-stop</td>
                <td>boolean</td>
                <td>true</td>
                <td>Stop sliding on mouse over</td>
            </tr>
            <tr>
                <td>width</td>
                <td style="white-space: nowrap">data-width</td>
                <td>int or string</td>
                <td>100%</td>
                <td>Carousel width</td>
            </tr>
            <tr>
                <td>height</td>
                <td style="white-space: nowrap">data-height</td>
                <td>int or string or false</td>
                <td>false</td>
                <td>Carousel height, if this eq false carousel height == max slide height</td>
            </tr>
            </tbody>
        </table>

        <h3>Methods</h3>
        <div class="example" data-text="ecample">
            <div class="grid">
                <div class="row cells2">
                    <div class="cell">
                        <div id="car_m_1" class="carousel" data-role="carousel" data-height="200" data-controls="false" data-markers="false" data-auto="false">
                            <div class="slide"><img src="images/1.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/2.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/3.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/4.jpg" data-role="fitImage" data-format="fill"></div>
                        </div>
                        <div class="padding20 bg-grayLighter align-center">
                            <button class="button" onclick="$('#car_m_1').data('carousel').priorSlide()">Prior slide</button>
                            <button class="button" onclick="$('#car_m_1').data('carousel').nextSlide()">Next slide</button>
                        </div>
                    </div>
                    <div class="cell">
                        <div id="car_m_2" class="carousel" data-role="carousel" data-height="200" data-controls="false" data-markers="false" data-auto="false">
                            <div class="slide"><img src="images/1.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/2.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/3.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="slide"><img src="images/4.jpg" data-role="fitImage" data-format="fill"></div>
                        </div>
                        <div id="car_m_2_thumbs" class="padding20 bg-grayLighter align-center">
                            <div class="thumb" data-index="1"><img src="images/1.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="thumb" data-index="2"><img src="images/2.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="thumb" data-index="3"><img src="images/3.jpg" data-role="fitImage" data-format="fill"></div>
                            <div class="thumb" data-index="4"><img src="images/4.jpg" data-role="fitImage" data-format="fill"></div>
                        </div>
                        <script>
                            $(function(){
                                var car_m_2 = $('#car_m_2').data('carousel');
                                var thumbs = $('#car_m_2_thumbs > .thumb');
                                $.each(thumbs, function(){
                                    var thumb = $(this),  index = thumb.data('index') - 1;
                                    thumb.on('click', function(){
                                        car_m_2.slideTo(index);
                                    });
                                });
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @@hit

</body>
</html>